<template>
	<view>
		<view class="" v-for="item in goodsinfo" :key="item.id">
			<view class="o-img">
				<image :src=" 'http://localhost:3001' +item.img " mode=""></image>
			</view>
			<view style="margin-left: 10rpx;">
				<view class="con">
					<view class="">
						<text style="color: #FF6600;font-size: 50rpx;">￥{{item.price}}</text>
						<text
							style="text-decoration: line-through;color: #666666;font-size: 30rpx;">￥{{item.market_price}}</text>
					</view>
					<view class="sc">
						<u-icon name="star" color="#FF6633"></u-icon>
						<text style="color:#FF6633;">收藏</text>
					</view>
				</view>
				<view>{{item.goodsname}}</view>
				<view class="time">11.11限时299</view>
				<view class="look">
					<text style="color: #666666;padding-right: 10rpx;">此商品于2020-11-11结束闪购特卖，品牌美妆闪购专场</text>
					<text style="color: #FF6600;">查看 ></text>
				</view>
				<!-- #ifdef H5 -->
				<view class="des" v-html="item.description"></view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<rich-text :nodes="content"></rich-text>
				<!-- #endif -->
			</view>
		</view>
		<view class="footer">
			<view class="icon">
				<u-icon name="kefu-ermai" color="#333"></u-icon>
				<text>客服</text>
			</view>
			<view class="icon">
				<u-icon name="home" color="#333"></u-icon>
				<text>店铺</text>
			</view>
			<view class="icon">
				<u-icon name="shopping-cart" color="#333"></u-icon>
				<text>购物车</text>
			</view>
			<view class="addshop" @click="addshop">加入购物车</view>
			<view class="buy" @click="buy">立即购买</view>
		</view>
	</view>
</template>

<script>
	import {
		detail,
		addcart,
	} from '../../request/app.js'
	export default {
		data() {
			return {
				goodsinfo: [],
				content: ''
			}
		},
		onLoad(options) {
			console.log(options.id);
			detail({
				id: options.id
			}).then(res => {
				console.log(res, '详情信息');
				if (res.data.code == 200) {
					this.goodsinfo = res.data.list
					// console.log(this.goodsinfo[0].description);
					this.content = this.goodsinfo[0].description.replace(/\<img/gi,
						'<img style="width:100%;height:auto;display:block;"')
				}
			})
		},
		methods: {
			addshop() {
				if (uni.getStorageSync('userinfo')) {
					addcart({
						uid: uni.getStorageSync('userinfo').uid,
						goodsid: this.goodsinfo[0].id,
						num: 1
					}, {
						authorization: uni.getStorageSync('userinfo').token
					}).then(res => {
						console.log(res, '购物车添加');
						if (res.data.code == 200) {
							uni.switchTab({
								url: '/pages/cart/cart'
							})
						}
					})
				} else {
					uni.showToast({
						title: '未登录，不能加入购物车',
						icon: 'error'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
				}
			},
			buy() {
				if (uni.getStorageSync('userinfo')) {
					let arr = []
					this.goodsinfo.map(item => {
						arr.push(item)
					})
					uni.setStorageSync('arr', arr)
					uni.navigateTo({
						url: '/pages/order/order'
					})
				}
			}
		}
	}
</script>

<style>
	.o-img image {
		width: 100%;
		height: 700rpx;
	}

	.con {
		display: flex;
		justify-content: space-between;
	}

	.con .sc {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.time {
		background-color: #FF6600;
		width: 250rpx;
		text-align: center;
		color: #fff;
		margin-top: 20rpx;
	}

	.look {
		display: flex;
		margin-top: 20rpx;
		background-color: #eee;
	}


	.des>>>img {
		width: 100%;
	}

	.footer {
		width: 100%;
		height: 120rpx;
		border-top: 1px solid #eee;
		background-color: #fff;
		display: flex;
		position: fixed;
		bottom: 0;
		justify-content: space-evenly;
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.footer .icon {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer .addshop {
		background-color: #ff3e3f;
		color: #fff;
		border-radius: 50rpx;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.footer .buy {
		background-color: #FF6633;
		color: #fff;
		border-radius: 50rpx;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
</style>
